<template>
  <el-dialog title="创建用户" width="60%" :before-close="handleClose">
    <el-form :model="userForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱">
            <el-input v-model="userForm.email" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="userForm.fullName" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码">
            <el-input v-model="userForm.phone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select v-model="userForm.roleId" placeholder="请选择角色" style="width: 100%">
              <el-option label="系统管理员" :value="1"></el-option>
              <el-option label="培训导师" :value="2"></el-option>
              <el-option label="护理学员" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-select v-model="userForm.department" placeholder="请选择部门" style="width: 100%">
              <el-option label="护理部" value="nursing"></el-option>
              <el-option label="内科" value="internal"></el-option>
              <el-option label="外科" value="surgery"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="职位">
            <el-input v-model="userForm.position" placeholder="请输入职位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="确认密码">
            <el-input v-model="userForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号状态">
            <el-switch v-model="userForm.status" active-text="启用" inactive-text="禁用" active-value="active"
              inactive-value="inactive"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="发送通知">
        <el-checkbox v-model="userForm.sendNotification">新用户创建成功后发送通知邮件</el-checkbox>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser">创建用户</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/user.js"; // 新增
import { ElMessage } from "element-plus"; // 新增

const userStore = useUserStore(); // 新增
const dialogVisible = ref(false);
const userForm = reactive({
  username: "",
  email: "",
  fullName: "",
  phone: "",
  roleId: null,
  department: "",
  position: "",
  password: "",
  confirmPassword: "",
  status: "active",
  sendNotification: true,
});

const handleClose = (done) => {
  // You can add a confirmation dialog here if needed
  done();
};

const saveUser = () => {
  // 1. 表单校验 (可根据需要添加更详细的规则)
  if (!userForm.username || !userForm.password || !userForm.roleId) {
    ElMessage.error("用户名、密码和角色为必填项！");
    return;
  }

  // 2. 构造与 register action 兼容的 payload
  const payload = {
    username: userForm.username,
    password: userForm.password,
    age: 18, // 假设默认年龄，或在表单中添加此字段
    name: userForm.fullName,
    email: userForm.email,
    phone: userForm.phone,
    roleId: userForm.roleId,
    // 根据角色判断实习阶段, 3 代表学员
    stage: userForm.roleId === 3 ? "intern" : "formal",
  };

  // 3. 调用 userStore 中已有的 register action
  userStore.register(payload,
    () => { // 成功回调
      ElMessage.success("用户创建成功！");
      dialogVisible.value = false; // 关闭弹窗
      // 可以在此 emit 事件通知父组件刷新列表
    },
    (errorMsg) => { // 失败回调
      // 错误消息已在 action 中弹出，这里可以只做额外处理
      console.error("管理员创建用户失败:", errorMsg);
    }
  );
};
const open = () => {
  dialogVisible.value = true;
};
defineExpose({
  open,
});
</script>

<style scoped>
/* Add any specific styles for the modal here */
</style>
